
{# drop-in UI官方的js生成的支付按钮 #}
<form id="payment-form" method="post" action="{{ payment_url }}">
  <section>
    <label for="amount">
      {#<span class="input-label">Amount</span>#}
      <div class="input-wrapper amount-wrapper">
        <input id="amount" name="amount" type="hidden" value="{{ total }}">
      </div>
    </label>

    <div class="bt-drop-in-wrapper">
      <div id="bt-dropin"></div>
    </div>
  </section>
  <input id="nonce" name="payment_method_nonce" type="hidden" />
</form>

{#<div class="buttons">#}
    {#<div class="pull-right">#}
        {#<input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" />#}
    {#</div>#}
{#</div>#}
<script type="text/javascript"><!--
    $('#button-confirm').bind('click', function() {
        $('#alipaysubmit').submit();
    });
    //--></script>

<script src="https://js.braintreegateway.com/web/dropin/1.9.2/js/dropin.min.js"></script>

{# google pay #}
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script src="https://js.braintreegateway.com/web/3.42.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.42.0/js/google-payment.min.js"></script>

<script>
    $(function () {
        var client_token = "{{ client_token }}";
        var form = document.querySelector('#payment-form');

        braintree.dropin.create({//支付控件初始化开始
            authorization: client_token,//由后端传过来的值，一组根据 MerchantId，BraintreePublicKey，BraintreePrivateKey生成的字符串
            container: '#bt-dropin',
            paypal: {
                flow: 'vault',
                buttonStyle: {  //可以修改一点点按钮的样式，限制性很多
                    color: '{{ payment_pp_braintree_paypal_button_colour }}',
                    shape: '{{ payment_pp_braintree_paypal_button_shape }}',
                    size: '{{ payment_pp_braintree_paypal_button_size }}'
                },
                currency: '{{ currency_code }}',
                amount: '{{ total }}',
            },
            //此处与上面的paypal设置不一样，亲么可以自己去尝试一下，不同点在哪
            //paypal: {
            //    flow: 'checkout',
            //    amount: document.querySelector('#amount').value,
            //    currency: 'USD'
            //},
            card: {//此项选填，干掉也没关系
                cardholderName: { required: true }, //必填的话，就会多生成一个持卡人姓名的输入框
                overrides: {
                    fields: {
                        number: {
                            placeholder: 'Card Number',
                        },
                        cvv: {
                            placeholder: 'CVV'
                        },
                        postalCode: {
                            placeholder: 'Postal Code'
                        }
                    },
                },
            },

            venmo: {allowNewBrowserTab: false},

            applePay: {
                displayName: 'My Store',
                paymentRequest: {
                    total: {
                        label: 'My Store',
                        amount: '{{ total }}'
                    },
                    // We recommend collecting billing address information, at minimum
                    // billing postal code, and passing that billing postal code with all
                    // Google Pay transactions as a best practice.
                    requiredBillingContactFields: ["postalAddress"]
                }
            },

            googlePay: {
                merchantId: 'merchant-id-from-google',
                transactionInfo: {
                    totalPriceStatus: 'FINAL',
                    totalPrice: '{{ total }}',
                    currencyCode: '{{ currency_code }}'
                },
                cardRequirements: {
                    // We recommend collecting and passing billing address information with all Google Pay transactions as a best practice.
                    billingAddressRequired: true
                }
            }
            //threeDSecure: {//3D安全校验，选填，用于信用卡支付的时候，若改卡的持卡人在开卡的时候启用了额外的身份校验，例如密码，那么点支付的时候则会弹出一个额外的框，输入密码。
            //    amount: document.querySelector('#amount').value
            //}
        }, function (createErr, instance) {
            form.addEventListener('submit', function (event) {
                event.preventDefault();
                instance.requestPaymentMethod(function (err, payload) {//客户输入密码等之后，接收返回的结果，即nonce，支付授权凭证
                    if (err) {
                        console.log('Error', err);
                        return;
                    }
                    // Add the nonce to the form and submit
                    document.querySelector('#nonce').value = payload.nonce;
                    form.submit();
                });
            });
        });
    });
</script>